<template>
	<!-- 封装的图片组件  -->
	<div class="fimg flexcent">
		<!-- 图片样式 -->
		<image class="image" @click="tolook" v-if="isshow" @error="handleerr" :src="imgpath" :mode="mode" lazy-load
			:draggable="draggable" />
		<div class="tips flexcent" v-if="!isshow">加载失败</div>
	</div>
</template>

<script>
// 引入正则的js
export default {
	name: 'fimg', //封装的图片组件
	props: {
		src: { //传入的图片地址
			type: String
		},
		require: { //是否是本地图片,默认不是
			type: Boolean,
			default: false,
		},
		mode: { //图片裁剪、缩放的模式
			type: String,
			default: "scaleToFill", //完全拉伸至填满
		},
		ispreview: { //是否开启点击预览功能
			type: Boolean,
			default: true
		}
	},
	data() {
		return {
			imageUrl: "", //图片地址头
			imgpath: "", //图片地址
			isshow: true, //是否显示图片
			draggable: false
		}
	},
	watch: {
		// 初始化同步数据 
		src: {
			handler(newName, oldName) {
				// 初始化设置图片地址
				this.setimgpath()
			},
			immediate: true
		}
	},
	methods: {
		// 点击查看图片
		tolook() {
			if (this.ispreview) {
				// 预览图片
				uni.previewImage({
					urls: [this.imgpath],
					current: 1,
					// loop:true,//可循环预览，app
				});
			} else {
				this.$emit('ispreview')
			}
		},
		// 初始化设置图片地址
		setimgpath() {
			this.isshow = true
			// 判断是否需要拼接
			if (this.src) {
				if (this.require) {
					// 不需要拼接
					this.imgpath = this.src
				} else {
					if (this.src.indexOf('http') > -1) {
						// 不需要拼接
						this.imgpath = this.src
					} else {
						// 需要拼接
						this.imgpath = '' + '/zdy-ops/sys/common/file/viewById?' + this.src
					}
				}
			}
		},
		// 加载失败的时候隐藏图片显示地址
		handleerr(e) {
			this.isshow = false
		}
	}
}
</script>

<style lang="less">
/* 封装的图片组件 */
.fimg {
	width: 100%;
	height: 100%;

	// 图片样式 
	.image {
		width: 100%;
		height: 100%;
	}

	// 失败文字提示
	.tips {
		border-radius: 12rpx;
		width: 100%;
		height: 100%;
		font-size: 22rpx;
		color: #676767;
		background-color: #ececec;
	}
}
</style>